<template>
	<view class="content">
		<view class="list">
			<view class="card" @click="pageUrl('子鼠',0)">
			
				<p>子鼠</p>
			</view>
			<view class="card" @click="pageUrl('丑牛',1)">
			
				<p>丑牛</p>
			</view>
			<view class="card" @click="pageUrl('寅虎',2)">
			
				<p>寅虎</p>
			</view>
			<view class="card" @click="pageUrl('卯兔',3)">
			
				<p>卯兔</p>
			</view>
			<view class="card" @click="pageUrl('辰龙',4)">
			
				<p>辰龙</p>
			</view>
			<view class="card" @click="pageUrl('巳蛇',5)">
			
				<p>巳蛇</p>
			</view>
			<view class="card" @click="pageUrl('午马',6)">
			
				<p>午马</p>
			</view>
			<view class="card" @click="pageUrl('未羊',7)">
			
				<p>未羊</p>
			</view>
			<view class="card" @click="pageUrl('申猴',8)">
			
				<p>申猴</p>
			</view>

			<view class="card" @click="pageUrl('酉鸡',9)">
				
				<p>酉鸡</p>
			</view>
			<view class="card" @click="pageUrl('戌狗',10)">
				
				<p>戌狗</p>
			</view>
			<view class="card" @click="pageUrl('亥猪',11)">
			
				<p>亥猪</p>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "看看你今天的星座运势吧",
				imageUrl: "https://www.leedong.top/img/suangua1.jpg"
			}

		},
		//2.分享到朋友圈
		onShareTimeline() {

			return {
				title: '看看你今天的星座运势吧',
				imageUrl: "https://www.leedong.top/img/suangua1.jpg",


			}
		},
		methods: {
			pageUrl(p,b) {
				uni.navigateTo({
					url: `/pages/shengxiaoyunshi/details?name=` +p+'&type='+b
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f1ec;
	}

	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20px;


		.card {
		    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
		    width: 30%;
		    text-align: center;
		    margin-top: 30px;
		    background-color: #fff;
		    border-radius: 15px;
		    min-height: 171rpx;
		    align-items: center;
		    line-height: 171rpx;


			img {
				width: 60px;
				height: 60px;
				margin-top: 10px;
				border-radius: 35px;
			}
		}

	}
</style>